<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width" charset="UTF-8"/>
    <title>学区地图</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">


    <script th:src="@{/js/jquery.min.js}"></script>

    <!--引用百度地图API-->
    <!--  <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=nMgIG8pC7YKcTysHAyoyx71oy9mMyH6h"></script>-->


    <!--高德地图api引入-->
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=3ef6ea1f2692b45f64e976374db2466f"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .bar {

            position: fixed;
            top: 0;
            left: 0;
            right: 0; /* 决定了搜索框置顶 */

            height: 44px;
            padding: 0 10px;

            /*background-color: #fff; */
            opacity: 0.8; /* 搜索框半透明效果 */

            z-index: 10;

        }

        .bar form {

            display: block;
            padding: 0;
            margin: 0;

        }

        .search-row {
            position: relative;
            height: 30px;
            padding: 7px 0;

        }

        .search-row input[type=search] {

            position: absolute;
            top: 7px;
            height: 40px;
            line-height: 40px;
            width: 100%;
            /*padding: 10px 15px 10px 30px;*/
            border: 0;
            border-radius: 30px;
            outline: 0;
            /*background-color: rgba(0,0,0,0.1);*/
            background-color: #fff;
            font-size: 16px;
            text-align: center;
            z-index: 1;
            color: #999;
        }

        .search-row .placeholder {
            position: absolute;
            /*top: 2px;*/
            left: 0;
            right: 0;
            display: inline-block;
            height: 34px;
            line-height: 34px;
            border: 0;
            border-radius: 6px;
            font-size: 16px;
            text-align: center;
            color: #999;
            z-index: 1;
        }

        .search-row .placeholder .iconfont {
            display: inline-block;
            width: 19px;
            line-height: 24px;
            padding: 10px 0;
            font-size: 21px;
            color: #999;
        }

        .search-row .placeholder .text {
            line-height: 40px;
            vertical-align: top;
        }

        .background img {

            width: 100%;

        }

        .active:before {

            position: absolute;
            top: 11px;
            left: 5px;
            right: auto;

            display: block;
            margin-right: 0;

            font-size: 21px;

        }

        .active input[type=search] {

            text-align: left

        }

        .active .placeholder {
            display: none
        }
    </style>
</head>
<body>

<div class="bar">
    <form name="search" class="search" id="search" action="">

        <p class="search-row">

            <input type="search" name="word" id="word">

            <label for="word" class="placeholder ">
                <span class="iconfont icon-sousuo"></span>
                <span class="text">搜索</span>
            </label>

        </p>

    </form>

</div>


<!--todo 这里加入地图-->
<!--百度地图容器-->
<div id="map_container"></div>

　　
<div id="container" style="display: block"></div>
　　
<div class="info">
    　　　　<p>在初始化地图时，如果center属性缺省，地图默认定位到用户所在城市的中心</p>
    <hr>
    　　　　<p id='adcode'></p>
    　　
</div>

</body>


<script th:inline="javascript">
    var ctx = /*[[@{/}]]*/ "";
</script>

<script th:inline="javascript">
    var data = /*[[${data}]]*/ [];//获取后台的所有点位数据
    var map;

    $(function () {

        //初始化页面
        initPage();
    });


    //创建和初始化地图函数：
    function initPage() {
        //设备宽高
        var w = document.documentElement.clientWidth;
        var h = document.documentElement.clientHeight;
        $("#map_container").css({"width": w, "height": h});


        initMap();
    }


    function initMap() {
        //初始化地图时，若center属性缺省，地图默认定位到用户所在城市的中心
        var mapObj = new AMap.Map('map_container');
        mapObj.plugin('AMap.Geolocation', function () {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                showButton: true,        //显示定位按钮，默认：true
                buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            });
            mapObj.addControl(geolocation);
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
            AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息


            function onComplete(data) {
                console.log(data);
                console.log(data.formattedAddress);
                console.log('纬度：' + data.position.getLat());
                console.log('经度：' + data.position.getLng());
            }

            // 解析定位错误信息
            function onError(data) {
                console.log('定位失败');
            }
        });

    }


</script>

<script type="text/javascript">

    $("#word").on("focus", function () {
        $(".text").text('');
    })


</script>
</html>
